<!doctype html>

<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <title th:text="${blog.title+'—微笑的丁总的个人博客'}">—微笑的丁总的个人博客</title>
    <meta name="description" th:content="${blog.summary}">
    <script src="/static/front/plugin/hightlight/highlight.pack.js"
            th:src="@{/front/plugin/hightlight/highlight.pack.js}"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <link rel="stylesheet" href="/static/front/plugin/hightlight/xcode.css"
          th:href="@{/front/plugin/hightlight/xcode.css}"/>

    <div th:include="include-front :: head"></div>
    <style>
        #Catalog_box {
            width: 100%;
            /*height: auto!important;*/
            /*overflow: hidden;*/
            /*position: fixed;*/
        }

        #Catalog_box dl {
            margin: 0;
        }

        #Catalog_box dl dd {
            margin: 0;
            height: 27px;
            overflow: hidden;
            width: 300px;
            line-height: 27px;
            padding-left: 15px;
            border-left: 1px solid #999;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }

        #Catalog_box dl dd.cate-item2 {
            padding-left: 30px;
        }

        #Catalog_box dl dd span {
            margin-right: 10px;
            color: #666;
            font-size: 14px;
            font-family: Arial;
        }

        #Catalog_box .cate-item1 span {
            color: #999;
            font-weight: bold;
            font-family: Arial;
            font-size: 14px;
            padding-right: 5px;
        }

        #Catalog_box .cate-item2 span {
            font-weight: 500;
        }

        #Catalog_box a {
            text-decoration: none;
            color: #666;
            font-family: "Microsoft YaHei";
            font-size: 14px;
        }

        #Catalog_box dl dd a:hover {
            color: #ff6600;
        }

        #Catalog_box .cate-item2 {
            padding-left: 20px;
        }

        #Catalog_box dd.active, #Catalog_box dd.active a, #Catalog_box dd.active span {
            color: #ff6600 !important;
        }

        #Catalog_box dd.active {
            border-left: 1px solid #ff6600;
            background: #E8E8E8;
        }

        .sticky {
            margin-top: 70px;
        }
    </style>
</head>
<body class="nobg">
<header th:replace="include-front :: header"></header>
<!--内容区开始-->
<div class="container">

    <!--左侧开始-->
    <section>
        <article>
            <!--导航-->
            <div class="mbnav">
                <i class="el el-home"></i>
                <a href="/" title="">首页</a>
                &gt;
                <a th:href="${'/f/category/'+blog.category.categoryId+'.html'}"
                   th:text="${blog.category.categoryTitle}"></a>&gt;正文
            </div>
            <!--标题-->
            <h3 class="act-title" th:text="${blog.title}"></h3>
            <!--副标题信息-->
            <div class="post-line bg-color">
                <ul>
                    <li><a th:title="${'边小丰发表于'+#dates.format(blog.createTime,'yyyy-MM-dd')}">
                        <i class="el-time"></i>
                        <time th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}"></time>
                    </a></li>
                    <li>
                        <a href="/about.html" title="本文作者：边小丰">
                            <i class="el-user"></i>边小丰</a>
                    </li>
                    <li>
                        <a href="#Comment" title="转到评论"><i class="el-comment"></i><span href="#SOHUCS"
                                                                                        id="changyan_count_unit"></span></a>
                    </li>
                    <li>
                        <a th:title="${'已有'+blog.click+'次浏览'}">
                            <i class="el-eye-open"></i>
                            <span th:text="${'('+blog.click+')'}"></span></a>
                    </li>
                </ul>
            </div>
            <div align="center">
                <img style="border: 0;display: block;width: 60%;height: auto;" th:src="${blog.headerImg}">
            </div>
            <div class=" article-content bg-color">
                <div class="article-content bg-color" th:id="${blog.support==1}?'tuijian':''">
                    <!--文章正文-->
                    <div class="article-body" th:utext="${blog.content}">

                    </div>
                    <!--END 文章正文-->
                    <!--分享-->
                    <div class="article-fx">
                        <span class="img-circle" href="javascript:void(0)" onClick="dashangToggle()">打赏</span>&nbsp;&nbsp;&nbsp;
                        <a class="fx-btn img-circle img-circle" href="javascript:;">分享</a>
                        <div class="bd-fx arc-bdfx">
                            <i class="el-remove fx-close"></i>
                            <ul class="bdsharebuttonbox">
                                <li><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></li>
                                <li><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a></li>
                                <li><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a></li>
                                <li><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></li>
                                <script th:inline="javascript"> window._bd_share_config = {
                                    "common": {
                                        "bdSnsKey": {},
                                        "bdText": "",
                                        "bdMini": "2",
                                        "bdMiniList": false,
                                        "bdPic": "",
                                        "bdStyle": "1",
                                        "bdSize": "32"
                                    }, "share": {}
                                };
                                (document.getElementsByTagName('head')[0] || document.body).appendChild(document.createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
                                </script>
                            </ul>
                        </div>
                    </div>
                    <!--END 分享-->
                    <hr>
                    <!--标签-->
                    <div class="article_tag">
                        <ul>
                            <li><a th:href="${'/f/category/'+blog.category.categoryId+'.html'}"
                                   th:title="${'归类：'+blog.category.categoryTitle}"
                                   th:text="${blog.category.categoryTitle}"></a>
                            </li>
                            <li th:each="tag:${blog.tags}">
                                <a class="b-tag-name" th:title="${'标签：'+tag}" th:text="${tag}">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </article>

        <!--上一篇，下一篇-->
        <div class="shangyip bg-color">
            <span>
                <i class="el-arrow-up"></i>上一篇：
                  <a class='blue-text' th:if="${previousBlog!=null}"
                     th:href="${'/f/article/'+previousBlog.blogId+'.html'}"
                     th:title='${previousBlog.title}'
                     th:text="${previousBlog.title}"></a>
                <a th:if="${previousBlog==null}" class='blue-text' href="#">没有了</a>
            </span>
            <span>
                <i class="el-arrow-down"></i>下一篇：
                <a class='blue-text' th:if="${nextBlog!=null}" th:href="${'/f/article/'+nextBlog.blogId+'.html'}"
                   th:title='${nextBlog.title}'
                   th:text="${nextBlog.title}"></a>
                 <a th:if="${nextBlog==null}" class='blue-text' href="#">没有了</a>
            </span>
        </div>
        <!--随机推荐-->
        <div class="maybe-love">
            <h4 class="index-title"><i class="el-heart"></i>您还可能喜欢</h4>
            <ul>
                <li th:each="blog:${randBlogList}">
                    <a th:href="${'/f/article/'+blog.blogId+'.html'}">
                        <img
                                th:src="${blog.headerImg}" th:alt="${blog.title}"
                                th:title="${blog.title}"/>
                        <span th:text="${blog.title}"></span>
                    </a>
                </li>
            </ul>
        </div>
        <!--END 随机推荐-->
        <h3 class="form-btn blue-text"><a href="javascript:;"><i class="el-edit"></i>我要留言</a></h3>
        
    </section>


    <aside th:replace="include-front :: side"></aside>

</div>
<div class="hide_box"></div>
<div class="shang_box">
    <a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="关闭"><img
            src="/front/images/close.jpg" alt="取消"></a>
    <img class="shang_logo" src="/front/images/logo.png" alt="Dimple 的个人博客"/>
    <div class="shang_tit">
        <p>感谢</p>
    </div>
    <div class="shang_payimg">
        <img src="/front/images/alipay.png" alt="扫码查看" title="扫一扫">
    </div>
    <div class="shang_payselect">
        <div class="pay_item checked" data-id="alipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="/front/images/alipay-logo.jpg" alt="支付宝"></span>
        </div>
        <div class="pay_item" data-id="weipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="/front/images/wechat-logo.jpg" alt="微信"></span>
        </div>
    </div>
</div>
<!-- 手机端 -->
<div class="shang_box_wap">
    <a class="shang_close" href="javascript:void(0)" onClick="dashangToggle()" title="关闭"><img
            src="/front/images/close.jpg"
            alt="取消"/></a>
    <div class="shang_tit">
        <p>感谢您的支持，我会继续努力的!</p>
    </div>
    <div class="shang_payimg">
        <img src="/front/images/alipay.png" alt="扫码查看"
             title="扫一扫"/>
    </div>
    <div class="pay_explain">长按二维码打赏，你说多少就多少</div>
    <div class="shang_payselect">
        <div class="pay_item checked" data-id="alipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="/front/images/alipay.png"
                                        alt="支付宝"/></span>
        </div>
        <div class="pay_item" data-id="weipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="/front/images/weichartpay.png"
                                        alt="微信"/></span>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".pay_item").click(function () {
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid = $(this).attr('data-id');
            $(".shang_payimg img").attr("src", dataid == "alipay" ? "/front/images/alipay.png" : "/front/images/weichart.png");
            $("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
        });
    });

    function dashangToggle() {
        $(".hide_box").fadeToggle();
        var is_pc = IsPC();
        if (is_pc == true) {
            $(".shang_box").fadeToggle();
        } else {
            $(".shang_box_wap").fadeToggle();
        }
    }

    // 判断是不是手机端
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
</script>
<aside th:replace="include-front :: footer"></aside>
<script th:src="@{/front/js/catNav.js}"></script>
<script>
    jQuery(document).ready(function ($) {
        //处理目录
        $.CateNav('.article-body', '#Catalog_box');
        $('#Catalog_box').height($('#Catalog_box').height() - 120);

        $('#toolbar-c').height($('#odl').height() / 4);

        console.log($('#Catalog_box').offset().top);
        $('#toolbar').height($('#Catalog_box').height());
        //处理固定元素
        //aside
        var $sticky = $('#Catalog_box');
        $sticky.hcSticky({
            stickTo: 'article',
            followScroll: false,
            responsive: {
                980: {
                    disable: true
                }
            }
        });
    });


</script>
</body>
</html>